import React, { useState, useMemo } from 'react'
import Lunb from '../../compnonest/lunb/Index'
import { Input, Card } from 'antd-mobile'
import styles from './homes.module.css'
import { useNavigate } from 'react-router-dom'
import http from '../../api/index'
import uni from '../../uni/Index'
function Index() {
  const [value, setValue] = useState('')
  let navget = useNavigate()

  const [lists, setLists] = useState([])

  const fundata = async () => {
    const res = await http.get('/api/list')
    console.log(res);
    const { data, code } = res.data
    if (code === 200) {
      setLists(data)
    }
  }

  useMemo(() => {
    fundata()
  }, [])

  const toxingq=(v)=>{
    navget(`/zhuc`,{state:v})
  }
  return (
    <div>
      <Lunb></Lunb>
      <div className={styles.homeBox}>
        <Input
          onFocus={() => navget('/seacher')}
          placeholder='请输入内容'
          value={value}
          onChange={val => {
            setValue(val)
          }}
        />
      </div>
      <Card style={{background:'#f2f4f8'}}>
        <h2>进行中</h2>
        <span className={styles.ckqb}> <b>查看全部</b></span>
      </Card>
      <div >
        {
          lists?.map((item) => {
            return <div className={styles.lbBox} key={item.id}>
              <img src={item.image} className={styles.tup} />
              <div className={styles.zhong}> 
                <span>艺术展览</span>
                <span><b>{item.title}</b></span>
                <span><b>{item.price}</b>参与者</span>
              </div>
              <div className={styles.you}>
                <span onClick={()=>toxingq(item)} className={styles.qian}>￥{item.price}</span>
                <span>{item.date}</span>
              </div>

            </div>
          })
        }
      </div>
    </div>
  )
}

export default uni(Index)
